import Taro, { Component } from '@tarojs/taro'
import { AtButton, AtForm, AtInput, AtSwitch } from 'taro-ui'

const http = require('../../utils/http.js')
const show = require('../../utils/show.js')
const constant = require('../../utils/constant.js')

export default class Login extends Component {
    config = {
        navigationBarTitleText: '极简笔记-绑定账号'
    }

    constructor() {
        super(...arguments)
        var openId = Taro.getStorageSync(constant.OPEN_ID_KEY)
        var platform = process.env.TARO_ENV
        this.state = {
            formObj: { platform, openId, exist: true }
        }
    }

    handleChangeAccount = (value) => this.handleChange('account', value)
    handleChangePassword = (value) => this.handleChange('password', value)
    handleChangeExist = (value) => this.handleChange('exist', value)
    handleChangeEmail = (value) => this.handleChange('email', value)
    handleChangeNick = (value) => this.handleChange('nick', value)
    handleChangeQa1 = (value) => this.handleChange('qa1', value)
    handleChangeQa2 = (value) => this.handleChange('qa2', value)
    handleChangeQa3 = (value) => this.handleChange('qa3', value)
    handleChange = (key, value) => {
        var formObj = this.state.formObj || {}
        formObj[key] = value
        this.setState({ formObj: formObj })
        return value
    }
    onSubmit = () => {
        if (!this.state.formObj.account) {
            show.warn('请输入账号')
            return
        }
        if (!this.state.formObj.password) {
            show.warn('请输入密码')
            return
        }
        if (!this.state.formObj.exist) {
            if (!this.state.formObj.email) {
                show.warn('请输入邮箱')
                return
            }
            let pattern = /^.+?@.+?\..+$/
            if (!pattern.test(this.state.formObj.email)) {
                show.warn('邮箱格式不对')
                return
            }
            if (!this.state.formObj.nick) {
                show.warn('请输入昵称')
                return
            }
            if (!this.state.formObj.qa1 || !this.state.formObj.qa2 || !this.state.formObj.qa3) {
                show.warn('请输入密保')
                return
            }
        }
        this.onBind()
    }
    onBind = () => {
        http.post2('/api/security/bind', this.state.formObj)
            .then(res => {
                if (res.bind == 'ok') {
                    Taro.setStorageSync(constant.USER_TOKEN_KEY, res.token)
                    Taro.redirectTo({
                        url: constant.PAGE_INDEX
                    })
                } else {
                    show.warn('用户名或密码不对')
                }
            })
    }

    render() {
        return (
            <AtForm onSubmit={this.onSubmit}>
                <AtInput
                    name='account'
                    title='账号'
                    type='text'
                    placeholder='请输入账号'
                    onChange={this.handleChangeAccount}
                    required={true}
                    clear={true}
                />
                <AtInput
                    name='password'
                    title='密码'
                    type='password'
                    placeholder='请输入密码'
                    onChange={this.handleChangePassword}
                    required={true}
                    clear={true}
                />
                <AtSwitch
                    title='已有账户'
                    checked={this.state.formObj.exist}
                    // disabled={true}
                    onChange={this.handleChangeExist}
                />
                {this.state.formObj.exist ? null : (
                    <view>
                        <AtInput
                            name='email'
                            title='邮箱'
                            type='text'
                            placeholder='用于找回密码'
                            onChange={this.handleChangeEmail}
                            required={true}
                            clear={true}
                        />
                        <AtInput
                            name='nick'
                            title='昵称'
                            type='text'
                            placeholder='请输入昵称'
                            onChange={this.handleChangeNick}
                            required={true}
                            clear={true}
                        />
                        <AtInput
                            name='qa1'
                            title='密保 1'
                            type='text'
                            placeholder='我是谁'
                            onChange={this.handleChangeQa1}
                            required={true}
                            clear={true}
                        />
                        <AtInput
                            name='qa2'
                            title='密保 2'
                            type='text'
                            placeholder='从哪来'
                            onChange={this.handleChangeQa2}
                            required={true}
                            clear={true}
                        />
                        <AtInput
                            name='qa3'
                            title='密保 3'
                            type='text'
                            placeholder='到哪去'
                            onChange={this.handleChangeQa3}
                            required={true}
                            clear={true}
                        />
                    </view>
                )}
                <AtButton formType='submit' type='primary'>绑定</AtButton>
            </AtForm>
        )
    }
}